<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/admin.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <ui:define name="header">
        <f:event type="preRenderView" listener="#{u_memberManagedBean.fixpage('album')}"/>
    </ui:define>

    <ui:define name="context">

        <h:form id="formTable" prependId="false">

            <article class="module width_full">
                <header><h3 class="tabs_involved">Album Manager</h3></header>

                <div class="tab_container">
                    <div id="tab1" class="tab_content">
                        #{a_albumManagedBean.getAlbum_All()}

                        <p:dataGrid  id="TableAlbum" var="a" value="#{a_albumManagedBean.albums}" paginator="true" 
                                     rows="16" columns="6" rowsPerPageTemplate="4,8,12,16"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} 
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

                            <p:panel header="#{a.name}" style="text-align:center">
                                <h:panelGrid columns="1" style="width:100%; text-align: center">  

                                    <h:graphicImage library="user/images/album" 
                                                    name="#{a_albumManagedBean.getAvatar(a)}" 
                                                    width="100" height="100"/> 

                                    <p:commandLink action="#{a_albumManagedBean.pageImage(a)}">
                                        #{a.imagesList.size()} image(s)
                                    </p:commandLink>

                                    <p:growl id="msgEdit" showDetail="true" />
                                    <p:commandLink update=":formTable:displayEdit,msgEdit" 
                                                   oncomplete="PF('editAlbumDialog').show()" title="View Detail">  
                                        <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
                                        <f:setPropertyActionListener value="#{a}"   
                                                                     target="#{a_albumManagedBean.album}" />  
                                    </p:commandLink>  
                                </h:panelGrid>  
                            </p:panel>

                        </p:dataGrid >

                        <p:dialog id="dlgEdit" header="Language Detail" widgetVar="editAlbumDialog" 
                                  resizable="false"  showEffect="clip" hideEffect="fold" modal="true">
                            <h:panelGrid id="displayEdit" columns="2" cellpadding="4">

                                <h:outputText value="ID" />  
                                <h:outputText value="#{a_albumManagedBean.album.id}"/>

                                <h:outputText value="Album name" />  
                                <h:inputText value="#{a_albumManagedBean.album.name}"/>

                                <p:commandButton id="btnEdit" value="Edit" 
                                                 onclick="PF('editAlbumDialog').hide();"
                                                 actionListener="#{a_albumManagedBean.editAlbum()}"
                                                 update=":formTable:TableAlbum"/>
                                <p:commandButton id="btnRemove" value="Remove" 
                                                 onclick="PF('editAlbumDialog').hide();"
                                                 actionListener="#{a_albumManagedBean.removeAlbum()}"
                                                 update=":formTable:TableAlbum"/>

                            </h:panelGrid>
                        </p:dialog>

                    </div><!-- end of #tab1 -->

                </div><!-- end of .tab_container -->

            </article><!-- end of content manager article -->

        </h:form>
    </ui:define>

</ui:composition>
